<template>
  <div style="padding: 20px; text-align: center">
    <div style="margin: 0 auto; width: 50%; display: flex">
      <el-input placeholder="请输名称" v-model="brand.name" clearable>
      </el-input>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div style="display: felx">
      <el-button type="success" @click="findPage()" style="margin: 50px 0"
        >搜索</el-button
      >
      <el-button
        type="pink"
        @click="
          dialogVisible = true;
          brandUA = {};
          textTip = '添加';
        "
        >添加</el-button
      >
    </div>
    <br />
    <el-table :data="brands" stripe style="width: 100%">
      <el-table-column prop="name" label="品牌名称">
        <template slot-scope="scope">
          <div>
            {{ scope.row.name | testnull }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="firstLetter" label="首字母">
        <template slot-scope="scope">
          <div>
            {{ scope.row.firstLetter | testnull }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="logo" label="品牌图片">
        <template slot-scope="s">
          <img style="width: 100px; height: 50px" :src="s.row.logo" />
        </template>
      </el-table-column>
      <el-table-column prop="productCommentCount" label="评论数">
        <template slot-scope="scope">
          <div>
            {{ scope.row.productCommentCount | testnull }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productCount" label="产品数">
        <template slot-scope="scope">
          <div>
            {{ scope.row.productCount | testnull }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop=" " label="是否展示">
        <template slot-scope="stu">
          <div @click="Cupdate(stu.row)">
            <el-switch
              v-model="stu.row.showStatus"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div style="display:flex">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="
              dialogVisible = true;
              brandUA = scope.row;
              textTip = '修改';
            "
          >
            修改
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="deletebrand(scope.row.id)"
          >
            删除
          </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <span
      style="cursor: pointer"
      v-for="item in pages"
      @click="
        page = item;
        findPage();
      "
    >
      [{{ item }}]
    </span> -->
    <el-pagination
      small
      :current-page="page"
      :page-size="size"
      @current-change="findbypage"
      layout="prev, pager, next"
      :total="pages * size"
    >
    </el-pagination>

    <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
    <el-dialog
      :title="textTip"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width: 500px; height: 200px">
        <el-form label-position="right" label-width="80px" :model="brandUA">
          <el-form-item label="品牌名称">
            <el-input v-model="brandUA.name"></el-input>
          </el-form-item>
          <el-form-item label="首字母">
            <el-input v-model="brandUA.firstLetter"></el-input>
          </el-form-item>
          <el-form-item label="logo(请输入在线地址)">
            <el-input v-model="brandUA.logo"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false;
            updateUA();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { findbypage, addbrand, updatebrand, delbrand } from "../api/brand";
export default {
  data() {
    return {
      dialogVisible: false,
      options: [
        {
          value: true,
          label: "展示",
        },
        {
          value: false,
          label: "隐藏",
        },
      ],
      value: "",
      flag: false,
      flag1: false,
      flag2: false,
      textTip: "",
      brand: {},
      brandUA: {},
      brands: [],
      pages: 0,
      page: 1,
      size: 5,
      brandTemp: {},
    };
  },
  watch: {
    dialogVisible(ne, ol) {
      if (!ne) {
        this.brandUA = {};
        this.findPage();
      }
    },
    value(ne, old) {
      if (ne) {
        this.brand.showStatus = 1;
      } else {
        this.brand.showStatus = 0;
      }
      this.page = 1;
      this.findPage();
    },
  },
  methods: {
    Cupdate(e) {
      updatebrand(e)
        .then((suc) => {
          this.open1();
          this.findPage();
        })
        .catch(() => {
          this.open2();
        });
    },
    updateUA() {
      if (this.brandUA.id) {
        updatebrand(this.brandUA)
          .then((suc) => {
            this.open1();
            this.findPage();
          })
          .catch(() => {
            this.open2();
          });
      } else {
        addbrand(this.brandUA)
          .then((suc) => {
            this.open1();
            this.findPage();
          })
          .catch(() => {
            this.open2();
          });
      }
    },
    deletebrand(id) {
      delbrand(id)
        .then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
          this.findPage();
        })
        .catch(() => {
          this.$notify({
            title: "失败",
            message: "删除失败",
            type: "success",
          });
        });
    },
    open1() {
      this.$notify({
        title: "成功",
        message: "修改(/添加)成功",
        type: "success",
      });
    },

    open2() {
      this.$notify({
        title: "失败",
        message: "修改（/添加）失败",
        type: "warning",
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addShow() {
      this.flag = true;
      this.flag1 = false;
      this.flag2 = false;
    },
    findPage() {
      findbypage(this.brand, this.page, this.size).then((res) => {
        this.brands = res.list;
        this.pages = res.pages;
        console.log(res);
      });
    },
    findbypage(e) {
      this.page = e;
      this.findPage();
    },
  },
  // filters: {},
  created() {
    this.findPage();
  },
};
</script>